<template>
    <div id="set-meal">
        <el-tabs v-model="activeName" @tab-click="handleClick" @click="reload()">
            <el-tab-pane label="套餐管理" name="first">
                <el-table
                        :data="setMeal"
                        style="width: 100%">
                    <el-table-column
                            prop="date"
                            label="套餐图片">
                        <template slot-scope="scope">
                            <div class="img-meal">
                                <div class="demo-image__placeholder">
                                    <div class="block-tp">
                                        <el-image style="width: 150px;height: 80px;border-radius: 15px"
                                                  :src="scope.row.imgBase64">
                                        </el-image>
                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="menuName"
                            label="套餐名称"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="menuPrice"
                            label="套餐价格"
                            width="100">
                    </el-table-column>
                    <el-table-column
                            prop="menuState"
                            :formatter="state"
                            label="套餐状态"
                            width="130">
                    </el-table-column>
                    <el-table-column
                            prop="menuCount"
                            label="套餐月销"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="menuTypeId"
                            label="分类"
                            width="180">
                        套餐
                    </el-table-column>
                    <el-table-column
                            prop="putontheshelf"
                            label="是否上架"
                            width="180">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.putontheshelf==0"
                                    type="success"
                                    icon="el-icon-check"
                                    @click="offShelf(scope.row)"
                                    circle>
                            </el-button>
                            <el-button v-if="scope.row.putontheshelf==1"
                                    size="mini"
                                    type="danger"
                                    @click="offShelf(scope.row)">
                                下架
                            </el-button>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="recommend"
                            label="是否推荐到主页"
                            width="180">
                        <template slot-scope="scope">
                            <el-button v-if="scope.row.recommend==0"
                                       style="margin-left: 30px"
                                       type="success"
                                       icon="el-icon-check"
                                       @click="whetherRecommend(scope.row)"
                                       circle>
                            </el-button>
                            <el-button v-if="scope.row.recommend==1"
                                       size="mini"
                                       type="danger"
                                       @click="whetherRecommend(scope.row)">取消推荐</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="260">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="seeDetails(scope.$index, scope.row)">查看详情</el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="handleDelete(scope.row.menuId)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="querySetMealPageBo.page.current"
                            :page-sizes="[querySetMealPageBo.page.size,10, 15, 20]"
                            :page-size="querySetMealPageBo.page.size"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pageTotal">
                    </el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane label="套餐增加" name="second">
                <div>
                    <div class="add-input" >
                        套餐主图:
                        <input type="file" id="upImageFile" @change="imageToBase64($event)"/>
                    </div>
                    <div class="add-input" id="add-menu">
                        添加套餐包含菜品:<el-button @click="queryAllMenu(0)">点击添加菜品</el-button>
                        <ul class="menus">
                            <li v-for="(set,index) in menu.setMealTable" :key="index">
                                {{set.menuName}}
                                <i class="el-icon-close"
                                    @click="removeMenu(index)">
                                </i>
                            </li>
                        </ul>
                    </div>
                    <div class="add-input">
                        套餐名称:
                        <el-input class="input" v-model="menu.menuName" @blur="nameVerification" placeholder="请输入内容"></el-input>
                    </div>
                    <div class="add-input">
                        套餐价格:
                        <el-input class="input" v-model="menu.menuPrice" @blur="priceVerification" placeholder="请输入内容"></el-input>
                    </div>
                    <div class="add-input">
                        折扣价格:
                        <el-input class="input" v-model="menu.discountPrice" placeholder="请输入内容"></el-input>
                    </div>
                    <div class="add-input">
                        套餐编号:
                        <el-input class="input" v-model="menu.menuGroup" @blur="groupVerification" placeholder="请输入内容"></el-input>
                    </div>
                    <div class="add-input" style="margin-top: 15px">
                        是否在主页推荐:
                        <el-checkbox v-model="stateB">推荐</el-checkbox>
                    </div>
                    <div class="add-input">
                        套餐介绍:
                        <el-input class="input" v-model="menu.details" @blur="detailsVerification" placeholder="请输入内容"></el-input>
                    </div>
<!--                    <div class="add-input">
                        套餐存量:
                        <el-input class="input" disabled v-model="menu.instock" placeholder="请输入内容"></el-input>
                    </div>-->
                    <div class="add-input" style="margin-left: 260px;margin-top: 30px">
                        <el-button type="primary" @click="insertMenuAndSetMeal" style="width: 150px">提交</el-button>
                    </div>
                </div>
                <div>
                    <el-dialog
                            title="选择菜品"
                            :visible.sync="dialogVisibleMenu"
                            width="30%">
                        <div>
                            <ul class="menus">
                                <li v-for="(all,index) in allMenu" :key="index">
                                    {{all.menuName}}
                                    <i class="el-icon-plus"
                                       @click="addMenu(index)">
                                    </i>
                                </li>
                            </ul>
                        </div>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisibleMenu = false">取 消</el-button>
                            <el-button type="primary" @click="dialogVisibleMenu = false">确 定</el-button>
                        </span>
                    </el-dialog>
                </div>
            </el-tab-pane>
            <el-tab-pane label="套餐修改" name="modify">
                <div>
                    <div style="margin-bottom: 20px">
                        请选择需要修改的套餐:
                        <el-select v-model="menuId" @change="queryMenuModify()" placeholder="请选择">
                            <el-option
                                    v-for="item in setMeal"
                                    :key="item.menuId"
                                    :label="item.menuName"
                                    :value="item.menuId">
                            </el-option>
                        </el-select>
                    </div>
                    <div class="add-input" >
                        套餐主图修改:
                        <input type="file" id="upImageFileModify" @change="modifyImageToBase64($event)"/>
                    </div>
                    <div class="add-input" id="modify-menu">
                        修改套餐包含菜品:<el-button @click="queryAllMenu(1)">点击添加菜品</el-button>
                        <ul class="menus">
                            <li v-for="(set,index) in modifyMenuData.setMealTable" :key="index">
                                {{set.menuName}}
                                <i class="el-icon-close"
                                   @click="modifyRemoveMenu(index)">
                                </i>
                            </li>
                        </ul>
                    </div>
                    <div class="img-meal" style="margin-top: 20px">
                        <div class="demo-image__placeholder">
                            <div class="block-tp">
                                <el-image style="width: 160px;height: 100px;border-radius: 15px"
                                          :src="modifyImgBase64">
                                </el-image>
                            </div>
                        </div>
                    </div>
                    <div class="add-input">
                        套餐名称:
                        <el-input class="input" v-model="modifyMenuData.menuName" placeholder="请输入内容"></el-input>
                    </div>
                    <div class="add-input">
                        套餐价格:
                        <el-input class="input" v-model="modifyMenuData.menuPrice" placeholder="请输入内容"></el-input>
                    </div>
                    <div class="add-input">
                        折扣价格:
                        <el-input class="input" v-model="modifyMenuData.discountPrice" placeholder="请输入内容"></el-input>
                    </div>
                    <div class="add-input">
                        套餐编号:
                        <el-input class="input" v-model="modifyMenuData.menuGroup" disabled placeholder="请输入内容"></el-input>
                    </div>
                    <div class="add-input">
                        套餐介绍:
                        <el-input class="input" v-model="modifyMenuData.details" placeholder="请输入内容"></el-input>
                    </div>
                    <div class="add-input" style="margin-left: 260px;margin-top: 30px">
                        <el-button type="primary" @click="modifySubmitMenu()" style="width: 150px">提交</el-button>
                    </div>
                </div>
                <div>
                    <el-dialog
                            title="选择菜品"
                            :visible.sync="dialogVisibleModifyMenu"
                            width="30%">
                        <div>
                            <ul class="menus">
                                <li v-for="(all,index) in allMenu" :key="index">
                                    {{all.menuName}}
                                    <i class="el-icon-plus"
                                       @click="modifyMenu(index)">
                                    </i>
                                </li>
                            </ul>
                        </div>
                        <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisibleModifyMenu = false">取 消</el-button>
                            <el-button type="primary" @click="dialogVisibleModifyMenu = false">确 定</el-button>
                        </span>
                    </el-dialog>
                </div>
            </el-tab-pane>
        </el-tabs>
        <div>
            <el-dialog
                    title="套餐详情"
                    :visible.sync="dialogVisible"
                    width="30%">
                <div class="img-meal">
                    <div class="demo-image__placeholder">
                        <div class="block-tp">
                            <span class="demonstration" style="font-weight: bolder">套餐名称：{{meal.menuName}}</span>
                            <el-image style="margin-top: 10px" :src="src"></el-image>

                        </div>
                    </div>

                </div>
                <div style="font-size: 28px;font-weight: bolder;padding-bottom: 10px;">
                    套餐价格:<span style="font-weight: bolder;font-size: 26px;color: red;">
                        {{meal.menuPrice}}元
                    </span>
                </div>
                <div style="margin-bottom: 10px">
                    套餐介绍:
                    <span>
                        {{meal.details}}
                    </span>
                </div>
                <div>
                    <span class="demonstration" style="font-weight: bolder">包含菜品：</span>
                    <el-table
                            :data="menus"
                            style="width: 100%">
                        <el-table-column
                                prop="menuImg"
                                label="菜品图片">
                            <template slot-scope="scope">
                                <div class="img-meal">
                                    <div class="demo-image__placeholder">
                                        <div class="block-tp">
                                            <el-image style="width: 60px;height: 30px;border-radius: 5px"
                                                      :src="require('../../../public/image/DishesManagement/'+scope.row.menuImg)">
                                            </el-image>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="menuName"
                                label="菜品名称"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="menuPrice"
                                label="菜品价格(元)">
                        </el-table-column>
                    </el-table>
                </div>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="Test">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    export default {
        name: "SetMeal",
        data() {
            return {
                src: "",
                dialogVisibleModifyMenu:false,
                dialogVisibleMenu:false,
                dialogVisible: false,
                activeName: 'first',
                setMeal:[],
                menus:[],
                currentPage1: 5,
                querySetMealPageBo:{
                    page:{
                        current:1,
                        size:5
                    },
                    bid:JSON.parse(sessionStorage.getItem("bid")),
                    state:null,
                },
                menu:{
                    discountPrice:null,
                    menuName:"",
                    menuPrice:"",
                    imgBase64:"",
                    menuImg:"",
                    menuIfMeal:1,
                    menuGroup:null,
                    recommend:0,
                    instock:60,
                    businessId:JSON.parse(sessionStorage.getItem("bid")),
                    details:"",
                    setMealTable:[],
                },
                pageTotal:null,
                meal:'',
                menuGroupIdBo:{
                    menuGroup:null,
                    menuGroupId:[],
                    bid:JSON.parse(sessionStorage.getItem("bid")),
                },
                dialogImageUrl: '', // 图片上传
                allMenu:[],
                stateB:null,
                groupTrueIsFalse:true,
                menuId:null,
                fileModifyValue:'',
                modifyImgBase64:'',
                modifyMenuData:{
                    discountPrice:null,
                    menuName:"",
                    menuPrice:"",
                    imgBase64:"",
                    menuImg:"",
                    menuGroup:null,
                    details:"",
                    setMealTable:[],
                    oldImg:'',
                },
                imgName:"",
                commonResult:{
                    code:null,
                    data:null
                }
            };
        },
        mounted() {
            this.querySetMeal()
        },
        methods: {
            Test(){
                this.dialogVisible = false;
                this.modifyMenuData.setMealTable = null
            },
            reload(){
                this.modifyMenuData = null;
            },
            state(row){
                if (row.menuState==1){
                    return "上架";
                }else{
                    return "下架"
                }
            },
            //修改套餐
            modifySubmitMenu(){
                alert(this.imgName)
                if (this.imgName!=""){
                    this.modifyMenuData.imgBase64 = this.modifyImgBase64;
                    this.modifyMenuData.menuImg = this.imgName
                }else {
                    this.modifyMenuData.imgBase64 = "";
                }
                this.$axios.post("/administration/menu/modify-menu-in-setMeal",this.modifyMenuData)
                    .then(result=>{
                        if(result){
                            if (result.data>0){
                                this.$message({
                                    message: '修改成功!',
                                    type: 'success'
                                });
                                this.querySetMeal()
                            }else{
                                this.$message({
                                    message: '修改失败!',
                                    type: 'warning'
                                });
                            }
                        }else{
                            this.$message({
                                message: '抱歉没有操作权限!',
                                type: 'warning'
                            });
                        }

                    })
            },
            queryMenuModify(){
                this.$axios.post("/administration/menu/query-menu-one",this.menuId).then(result=>{
                    this.modifyMenuData = result.data;
                    this.modifyImgBase64 = this.modifyMenuData.imgBase64;
                    this.queryMenuInfo(this.menuId)
                })
            },
            //查询全部套餐
            querySetMeal(){
                this.$axios.post("/administration/menu/query-set-meal",this.querySetMealPageBo).then(result=>{
                    this.setMeal = result.data.records;
                    this.pageTotal = result.data.total;
                })
            },
            queryMenuInfo(menuId) {
                this.$axios.post("/administration/set-meal/query-all-setmeal", menuId).then(result => {

                    this.menus = []
                    let menuGroupId = new Array();
                    for (let i = 0; i < result.data.length; i++) {
                        menuGroupId[i] = result.data[i].menuGroup;
                    }
                    this.menuGroupIdBo.menuGroupId = menuGroupId;
                    this.$axios.post("/administration/menu/query-menu", this.menuGroupIdBo).then(result => {
                        this.menus = result.data
                        this.modifyMenuData.setMealTable = result.data
                    })
                })
            },
            //查询所有菜品，向套餐中添加
            queryAllMenu(state){
                this.$axios.post("/administration/menu/query-all-dishes",this.querySetMealPageBo).then(result=>{
                    if(state==0){
                        this.dialogVisibleMenu = true
                    }else{
                        this.dialogVisibleModifyMenu=true
                    }
                    this.allMenu = result.data
                })
            },
            //向套餐添加菜品
            addMenu(j){
                for (let i=0;i<this.allMenu.length;i++){
                    if(this.menu.setMealTable[i] != null && this.menu.setMealTable[i].menuId==this.allMenu[j].menuId) {
                        this.$message({
                            message: '不可重复添加!',
                            type: 'warning'
                        });
                        return;
                    }
                    if (this.menu.setMealTable[i] == null) {
                        this.menu.setMealTable[i] = this.allMenu[j];
                        return;
                    }
                }
            },
            //修改所属的菜品
            modifyMenu(j){
                for (let i=0;i<this.allMenu.length;i++){
                    if(this.modifyMenuData.setMealTable[i] != null && this.modifyMenuData.setMealTable[i].menuId==this.allMenu[j].menuId) {
                        this.$message({
                            message: '不可重复添加!',
                            type: 'warning'
                        });
                        return;
                    }
                    if (this.modifyMenuData.setMealTable[i]==null){
                        this.modifyMenuData.setMealTable[i] = this.allMenu[j];
                        return;
                    }

                }
            },
            //删除套餐中菜品
            removeMenu(i){
                this.menu.setMealTable.splice(i,1)
            },
            modifyRemoveMenu(i){
                this.modifyMenuData.setMealTable.splice(i,1)
            },
            /**
             * 添加套餐按钮
             */
            insertMenuAndSetMeal(){
                if (this.verification()){
                    if (this.stateB==true){
                        this.menu.recommend = 1;
                    }
                    this.$axios.post("/administration/menu/addmenu-and-setmeal",this.menu).then(result=>{
                        if (result.data){
                            if (result.data>0){
                                this.$message({
                                    message: '添加成功!',
                                    type: 'success'
                                });
                                window.location.reload();
                                this.querySetMeal()
                            }else{
                                this.$message({
                                    message: '添加失败!',
                                    type: 'warning'
                                });
                            }
                        }else{
                            this.$message({
                                message: '抱歉您没有操作权限!',
                                type: 'warning'
                            });
                        }

                    })
                }
            },
            //将上传的图片转换为base64编码
            modifyImageToBase64(){
                //修改的图片上传
                let files = document.getElementById('upImageFileModify').files[0];
                let fileName = document.getElementById('upImageFileModify').files[0].name
                this.imgName = fileName
                var reader = new FileReader()
                reader.readAsDataURL(files)
                reader.onload = () => {
                    console.log('file 转 base64结果：' + reader.result)
                    this.modifyImgBase64 = reader.result
                }
                reader.onerror = function (error) {
                    console.log('Error: ', error)
                }

            },
            //将上传的图片转换为base64编码
            imageToBase64(){
                //图片上传
                let files = document.getElementById('upImageFile').files[0];
                let fileName = document.getElementById('upImageFile').files[0].name
                this.menu.menuImg = fileName
                var reader = new FileReader()
                reader.readAsDataURL(files)
                reader.onload = () => {
                    console.log('file 转 base64结果：' + reader.result)
                    this.menu.imgBase64 = reader.result
                }
                reader.onerror = function (error) {
                    console.log('Error: ', error)
                }
            },
            /**
             * 文件上传验证
             */
            fileImageVerification(){
                let files = document.getElementById('upImageFile').files[0];
                if (files==null){
                    this.$message({
                        showClose: true,
                        message: '请选择餐品图片上传!',
                        type: 'error'
                    });
                    return false
                }
                return true;
            },
            /**
             * 套餐名称表单验证
             */
            nameVerification(){
                if (this.menu.menuName=="" || this.menu.menuName==null){
                    this.$message({
                        showClose: true,
                        message: '请填写套餐名称!',
                        type: 'error'
                    });
                    return false;
                }
                return true
            },
            /**
             *
             * @returns {boolean}
             */
            priceVerification(){
                if (this.menu.menuPrice==null || this.menu.menuPrice==""){
                    this.$message({
                        showClose: true,
                        message: '请填写套餐价格!',
                        type: 'error'
                    });
                    return false
                }
                return true
            },
            groupVerification(){
                if (this.menu.menuGroup=="" || this.menu.menuGroup==null){
                    this.$message({
                        showClose: true,
                        message: '请填写套餐编号!',
                        type: 'error'
                    });
                    return false;
                }
                this.groupRepeatVerification();
                return true
            },
            groupRepeatVerification(){
                this.menuGroupIdBo.menuGroup = this.menu.menuGroup
                this.$axios.post("/administration/menu/group-repeat-verification",this.menuGroupIdBo).then(result=>{
                    if (!(result.data>0)){
                        this.groupTrueIsFalse = true;
                        return true;
                    }else{
                        this.$message({
                            showClose: true,
                            message: '重复编号!',
                            type: 'error'
                        });
                        this.groupTrueIsFalse = false;
                        return false
                    }
                })
            },
            detailsVerification(){
                if (this.menu.details==null || this.menu.details==""){
                    this.$message({
                        showClose: true,
                        message: '请填写套餐介绍!',
                        type: 'error'
                    });
                    return false;
                }
                return true
            },
            setMealTableVerification(){
                if (!(this.menu.setMealTable.length>0)){
                    this.$message({
                        showClose: true,
                        message: '不考虑往套餐里添加菜品么!',
                        type: 'warning'
                    });
                    return false
                }
                return true
            },
            verification(){
                let judgment = true;
                if(!this.fileImageVerification()) return judgment=false;
                if(!this.nameVerification()) return judgment=false;
                if(!this.priceVerification()) return judgment=false;
                if(!this.groupVerification()) return judgment=false;
                if(!this.detailsVerification()) return judgment=false;
                if(!this.setMealTableVerification()) return judgment=false;
                if(!this.groupTrueIsFalse) return judgment=false;
                return judgment
            },
            offShelf(row) {
                this.commonResult.code = row.menuId
                if (row.putontheshelf == 1) {
                    this.commonResult.data = 0;
                } else {
                    this.commonResult.data = 1;
                }
                this.$axios.post("/administration/menu/off/shelf", this.commonResult)
                    .then(result => {
                        if (result.data) {
                            if (result.data > 0) {
                                this.$message({
                                    message: '操作成功!',
                                    type: 'success'
                                });
                                this.querySetMeal()
                            } else {
                                this.$message({
                                    showClose: true,
                                    message: "失败",
                                    type: 'error'
                                });
                            }
                        }else{
                            this.$message({
                                showClose: true,
                                message: "抱歉您没有操作权限",
                                type: 'error'
                            });
                        }
                    })
            },
            whetherRecommend(row){
                this.commonResult.code = row.menuId
                if (row.recommend==1){
                    this.commonResult.data = 0;
                }else{
                    this.commonResult.data = 1;
                }
                this.$axios.post("/administration/menu/whether/recommend",this.commonResult)
                    .then(result=>{
                        if (result.data>0){
                            this.$message({
                                message: '操作成功!',
                                type: 'success'
                            });
                            this.querySetMeal()
                        }else{
                            this.$message({
                                showClose: true,
                                message: 'Oh my god!',
                                type: 'error'
                            });
                        }
                    })
            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
            //查看套餐详情
            seeDetails(index, row) {

                this.$axios.post("/administration/menu/query-menu-one",row.menuId).then(result=> {
                    this.dialogVisible = true
                    this.meal = result.data
                    this.queryMenuInfo(this.meal.menuId);
                    this.src = this.meal.imgBase64
                })
                console.log(index, row);
            },
            //删除套餐
            handleDelete(id) {
                if (confirm("确定要删除这条套餐信息么!")){
                    this.$axios.post("/administration/menu/del-menu-in-set-meal",id).then(result=>{
                        if(result.data){
                            if (result.data>0){
                                this.$message({
                                    message: '删除成功!',
                                    type: 'success'
                                });
                                this.querySetMeal();
                            }else{
                                this.$message({
                                    message: '删除失败!',
                                    type: 'error'
                                });
                            }
                        }else{
                            this.$message({
                                message: '您没有权限!',
                                type: 'error'
                            });
                        }

                    })
                }
            },
            handleSizeChange(val) {
                this.querySetMealPageBo.page.size=val
                this.querySetMeal();
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.querySetMealPageBo.page.current=val
                this.querySetMeal();
                console.log(`当前页: ${val}`);
            },
        }
    }
</script>

<style scoped>
    #set-meal{
        width: 97em;
    }
    .block{
        margin-left: 33%;
    }
    #img img{
        border-radius: 15px;
    }
    .img-meal{
        width: 360px;
/*        margin-left: 25%;*/
    }
    .add-input{
        font-weight: bold;
        font-size: 16px;
        color: #909399;
    }
    .input{
        padding-left: 10px;
        margin-top: 20px;
        width: 260px;
    }
    #add-menu{
        float: right;
        margin-right: 500px;
    }
    #modify-menu{
        float: right;
        margin-right: 500px;
    }
    .menus{
        width: 560px;
        height: 280px;
    }
    .menus li{
        font-size: 12px;
        border: 1px solid #d9ecff;
        color: #409eff;
        margin-top: 10px;
        padding: 8px 10px 8px 20px;
        margin-right: 10px;
        border-radius: 10px;
        background-color: #ecf5ff;
        float: left;
        font-weight: normal;
        list-style-type: none;
    }
    .menus li:hover{
        border: 1px solid #e1f3d8;
        background-color: #e1f3d8;
    }
    .el-icon-close{
        margin-left: 10px;
    }
</style>